
import React from 'react'
import {IGood, IGoodList} from '@/model/declare'
import { Card } from '@/components/Card'
import { GoodEle, Direction } from '@/components/Good'
// import { useLocalStore, Observer } from 'mobx-react'
import { Observer, useLocalStore } from 'mobx-react-lite'

import { cartModel } from '@/model/CartModel'
import {View, Text, Image, Button, Navigator} from "@tarojs/components";
import {ImageEle} from "@/components/Image";



function ActivityItem(props) {

  return (<View className='activity' key={props.key}>
    <View className='coverImg'>
      <Image src={props.img}  />
    </View>
    <View className='rightContent'>
      <View className='title'>
        {props.title}
      </View>
      <View className='subtitle'>
        {props.desc}
      </View>

      <View style={{textAlign:'right'}}>
        <Text className='goApplyBtn'>参加活动</Text>
      </View>
    </View>
  </View>)

}

export const ActivityGoodsList: React.FC<IGoodList> = (props) => {
  const store = useLocalStore(() => cartModel)
  return (
    <Card title={props.title}>
      {
        props.items.filter(it => it).map((it, idx) => {
          return (
              <Observer>
                {() => {
                  return (
                    <Navigator url={`/pages/activity/info/index?activityId=${it.id}`} key={it.id}>
                    <ActivityItem
                      direction={Direction.ROW}
                      img={it.main_pic}
                      title={it.nick || it.name}
                      desc={it.brief}
                      price={it.price}
                      oldPrice={it.market_price}
                      discount={it.dis}
                      number={it.num || 0}
                      id={it.id}
                      onAdd={async (num) => {
                      const ans = await store.addCart({
                        number: num,
                        Good: it
                      })
                      return ans;
                    }}
                      key={idx}
                    />
                    </Navigator> ) } }
              </Observer>
          )
        })
      }
    </Card>
  )
}
